<template>
  <div class="menudetail">
    <x-header :left-options="{showBack: true , backText:'' }"></x-header>
    <div class="com-hen">订单详情</div>
    <div class="detail-list">
        <div class="detail-head">
          <div class="head-l">{{back}}<div class="head-time">{{createdTime}}</div></div>
          <div class="head-r">&nbsp;<br><div>(订单编号:{{orderNo}})</div></div>
        </div>

        <div class="detail-main">
          <ul>
            <li v-for="item in foods">
              <div class="detail-name">{{item.name}}</div>
              <div class="detail-num">X{{item.quantity}}</div>
              <div class="detail-price">￥{{item.price}}</div>
            </li>
          </ul>
        </div>
    </div>

    <div class="detail-foot">
        <div class="foot-com">
          <div class="com-l">配送费</div>
          <div class="com-r">￥{{feePost}}</div>
        </div>

        <div class="foot-com">
          <div class="com-l"><span class="iconfont iconfont icon-Dd_hb"></span>红包</div>
          <div class="com-r">-￥0</div>
        </div>

        <div class="foot-com com-total">
          <div class="com-l">总计:￥{{total}}<!--  &nbsp;优惠￥6 &nbsp;打赏￥2 --></div>
          <div class="com-r">实付 <span>￥{{total}}</span></div>
        </div>
    </div>

    <div class="com-foot" @click="map">配送信息</div>

    <div class="map">
      <Tmaps></Tmaps>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Sticky, XHeader, Toast } from 'vux'
import Tmaps from '../person/Tmaps'

export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    XHeader,
    Toast,
    Tmaps
  },
  data () {
    return {
      order:null,
      feePost:null,
      createdTime:null,
      orderNo:null,
      foods:null,
      total:null,
      back:null
    }
  },
  methods: {

  },
  created(){
    var orderId = this.$route.query.id;
    this.$http.get('/api/order/show/'+orderId).then((res)=>{
        var data =  res.body.data;
        this.order = data;
        this.createdTime = data.created_at;
        this.orderNo = data.order_no;
        this.foods = data.foods.data;
        this.total = data.original_total;
        this.back = this.order.foods.data[0].canteen+this.order.foods.data[0].shop.data.name;
        document.getElementsByClassName('vux-header-back').innerHTML = this.back;
    });

    this.$http.get('/api/delivery-addresses/default').then(function(res){
      var schoolId = res.body.data.school_id;
      this.$http.get('/api/schools/'+schoolId+'/extra-charges').then((res) => {
          var data = res.body.data;
          this.feePost = (data.fee+data.cut+data.pack)*0.01;
      });
    });
  },
  mounted() {
    
  }
}

</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.vux-header{
  background-color:#ff4d4d;
}
.menu-foot{
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-between;
  padding-top:0.5rem;
  border-top:1px solid #bababa;
}
.foot-l{
  flex:3;
  padding:0.5rem;
}
.foot-r{
  flex:1;
  background-color:#ff4d4d;
  color:#fff;
  text-align:center;
  border-radius:8px;
  padding:0.5rem;
}
.foot-l span{
  color:#ff4d4d;
}
.card{
  margin-top:1rem;
  background-color:#fff;
  padding:1rem 2rem;
  font-size:16px;
}
.card ul{
  list-style: none;
}
.card-head{
  display: -webkit-flex; /* Safari */
  display: flex;
  border-bottom:1px solid #bababa;
}
.head-l img{
  width:4rem;
  height:4rem;
  border-radius:50%;
}
.head-name{
  color:#3f3f3f;
}
.head-l{
  flex:1;
}
.head-r{
  flex:5;
}
.info-list li{
  line-height:32px;
}
.com-hen ,.com-foot{
  font-size:15px;
  color:#969696;
}
.com-hen {
  margin:62px 0 14px 28px;
}
.com-foot{
  margin:14px 0 14px 28px;
}
.detail-list{
  background-color:#fff;
  padding:1.5rem 2rem 1rem 1.5rem;
}
.detail-head{
  color:#969696;
  display:flex;
  display:-webkit-flex;
  padding-bottom:8px;
  border-bottom:1px solid #bababa;
}
.head-l{
  flex:1;
  font-size:16px;
}
.head-r{
  flex:1;
  font-size:12px;
  text-align:right;
}
.head-time{
  font-size:12px;
}
.detail-main{
  padding:12px 0;
  border-bottom:1px solid #bababb;
}
.detail-main ul{
  list-style: none;
}
.detail-main ul li{
  display:flex;
  display:-webkit-flex;
  line-height:30px;
}
.detail-main  li div{
  flex:1;
  font-size:16px;
}
.detail-name{
  color:#3f3f3f;
}
.detail-num{
  text-align:center;
  color:#969696!important;
}
.detail-price{
  text-align:right;
}
.detail-foot{
  background-color:#fff;
  padding:0rem 2rem 1rem 1.5rem;
}
.foot-com{
  display:flex;
  display:-webkit-flex;
  font-size:16px;
  line-height:30px;
}
.com-l{
  flex:2;
}
.com-r{
  flex:1;
} 
.com-r{
  text-align:right!important;
}
.com-total{
  color:#969696;
}
.com-total .com-r span{
  color:#fe4e4c;
}
.foot-com .icon-Dd_hb{
  margin-right:1rem;
  color:#ff4d4d;
}
.map{
  width:100%;
  height:16rem;
  background-color:#ccc;
}
.com-test{
  background-color:#ff4d4d;
  width:40%;
  margin-left:30%;
  color:#fff;
  border-radius:3px;
  font-size:16px;
  height:40px;
  text-align:center;
  line-height:40px;
  margin-bottom:1rem;
}
</style>